威爾豬在一開始學 CSS 時，蠻常會用到邊框來釐清觀念跟跑版問題，邊框可以用來判斷區塊、元素位置、重疊問題等，尤其學到 Position、Display 跟 Float 時，切身之痛啊，所以不要以為它只能拿來當裝飾用，那我們來看看在 Tailwind 上，邊框該如何使用。

邊框寬度

各位看官都知道，在螢幕上邊寬最基本的寬度為 1px ，不過有些設計師會說，我這邊寬只有 0.5px，你用 1px 這樣看起來很重。拜託不要這樣搞工程師了好嗎？威爾豬也知道有差，但一般人不會特別注意這 0.5px 的，雖然還是可以用邪魔歪道來實現，但這效能不好，未來也不好維護。

在 Tailwind 也一樣，DEFAULT 最小為 1px，再來就是 2px、4px、6px、8px，為何都是偶數，是因為基數容易有鋸齒狀的情況發生，Tailwind 才會這麼設定。使用方式為：border-({ t | r | b | l })-{width}。方向和間距一樣，如果四周都有邊框 1px，使用 border 即可，如果只有單邊上方有 1px 邊框，則為 border-t。

邊框預設的顏色為：#E5E7EB。

子元素分隔線

這功能非常好用，設計師可能會在列表上增加分隔線，我們只要在父層上加一個邊框就可以了，不用像以往一樣寫 CSS 還要想辦法讓線段重疊或刪除。使用方式：divid-{ x | y }-{width}，x 即為分隔水平的子元素，y 為分隔垂直的子元素。範例如下：

• 水平子元素分割：

<ul class="w-[300px] flex text-center border divide-x">
    <li class="w-1/3">1</li>
    <li class="w-1/3">2</li>
    <li class="w-1/3">3</li>
</ul>

• 垂直子元素分隔：

<ul class="w-[300px] text-center border divide-y">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

邊框顏色

不管是邊框還是分隔線，顏色的使用方式都文字一樣，{對象}-{顏色}-{明度}。例如邊框和分隔線為綠色，即為 border-green-500、divide-green-500，使用上面垂直子元素為範例：

<ul class="w-[300px] text-center border border-green-500 divide-y divide-green-500">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

表格邊框

不過表格分隔線可千萬不要使用 divide- 來做，直接在 tr、td 上寫 border 就好了，Tailwind 很聰明，預設已經使用 border-collapse，表格會讓相鄰的線段合併為同一條線，但如果你想讓表格的線段分開，只要在標格上寫 border-separate，範例如下：

<table class="border border-separate">
    <thead>
      <tr>
        <th class="border">TITLE</th>
        <th class="border">TITLE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border">data</td>
        <td class="border">data</td>
      </tr>
      <tr>
        <td class="border">data</td>
        <td class="border">data</td>
      </tr>
    </tbody>
</table>

當然邊框想自定義，還是使用 tailiwind.config.js 裡的 theme.borderWidth：

// tailwind.config.js
module.exports = {
  ...
  theme: {
  ... ,
    borderWidth: {
      '0': '0',
      DEFAULT: '1px',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
      '10': '10px',
      ...
    },
    ...
  },
  ...
}

邊框樣式

使用方式：border-{style}，和 CSS 差不多，就是後面加上需要的樣式，Tailwind 提供了 border-solid、border-dashed、border-dotted、border-double、border-none，基本上絕對夠用，不過還是記得要有 border 的寬度才能使用。但如果只單一寫 Border，預設會為：1px solid #E5E7EB。

<button class="border-4 border-green-500 border-solid">border-solid</button>
<button class="border-4 border-green-500 border-dashed">border-dashed</button>
<button class="border-4 border-green-500 border-dotted">border-dotted</button>
<button class="border-4 border-green-500 border-double">border-double</button>
<button class="border-4 border-green-500 border-none">border-none</button>

圓角使用

使用方式： rounded-({ t | r | b | l })-{size}。和間距一樣，圓角也分上右下左，不寫方向就是四周圍圓角，至於圓角大小就參照下表，威爾豬都整理成 px 讓同學們比較好對照。至於圓形或藥丸形，則使用 rounded-full 就可以了，並沒有 rounded-pill 這種 class。

<div class="px-4 py-2 text-green-500 border border-green-500 rounded">cube</div>
<div class="px-8 py-2 text-green-500 border border-green-500 rounded-full">pill</div>
<div class="h-14 w-14 text-green-500 border border-green-500 rounded-full">circle</div>

當然覺得預設的圓角不符需求，也是可以自定義的，相信有看過前面的同學應該都知道在哪修改了，我們编辑 Tailwind.config.js 中的 theme.borderRadius 部分来修改，新增或刪除。

// tailwind.config.js

  module.exports = {
    ...
    theme: {
      ... 
      borderRadius: {
        'none': '0',
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'xl': '0.75rem',
        'full': '9999px',
      },
      ...
    },
    ...
  }

以上為今天邊框的大致介紹，咱們明天見。